<script setup>
import { watchEffect, ref, computed } from "vue";
const emits  = defineEmits(['change'])
const props = defineProps({
  originData: {
    type: Array,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  tab:{
    type: Object,
    default: () => {},
  }
});
const treeRef = ref();
const data = ref([]);
const getData = computed(() => {
  return treeRef.value;
});

watchEffect(() => {
  if (props.originData) {
    data.value = JSON.parse(JSON.stringify(props.originData)).filter(v=>v.id == props.tab.id);
  }
});

const customNodeClass = (data) => {
  if (data.children?.some(v=>v.permissionType == 'B')) {
    return "is-penultimate";
  }
  return null;
};

const checkChange = (item, data) => {
  const list = data.checkedKeys;
  const halfList = data.halfCheckedKeys;
  // const newList = [...list,...halfList];
  emits('change',{tab: props.tab,data: list})
};
const setChecks = (data) => {
  treeRef.value.setCheckedKeys(data);
};
defineExpose({ setChecks, getData });
</script>
<template>
  <el-tree
    ref="treeRef"
    class="treeClass"
    :data="data"
    show-checkbox
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    @check="checkChange"
    :props="{ class: customNodeClass }"
  />
</template>

<style lang="less" scoped>
.treeClass {
  border-radius: 4px;
  padding: 16px;
  background: #3480ff0d;
  :deep(.is-penultimate > .el-tree-node__content) {
    // color: #626aef;
  }
  :deep(.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children) {
    display: flex;
    flex-direction: row;
  }
  :deep(.is-penultimate > .el-tree-node__children > div) {
    // width: 50%;
  }
}
</style>
